<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../perEvaluationResult/importhead.jsp" %>
<%
	String classid = request.getParameter("classid");
	int checktypeid = Integer.parseInt(request.getParameter("checktypeid"));
	String checktime = request.getParameter("checktime");
	//班级信息
	VClassInfo cls = DAOFactory.getCloudClassDAO().getVClassInfo(classid);
	//班级的测试统计信息
	List<VClassMHTCheckReportStatis> mhtStatisList 
		= DAOFactory.getCheckStatisDAO().getVClassMHTCheckReportStatisByClassId(classid,checktime);
 	//班级测评人数统计信息
 	VClassCheckPersonNumber personNumber 
 		= DAOFactory.getCheckStatisDAO().getClassCheckPersonNumberByCondition(checktypeid, classid,checktime); 

 %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../lib/echarts.common.min.js"></script>
    <script type="text/javascript" src="../lib/jquery/jquery-1.9.0.min.js"></script>
    <script src="../js/jsuntil/FileSaver.js"></script>
    <script src="../js/jsuntil/jquery.wordexport.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body{
            font-family: 宋体;
            font-size: 12px;
            
        }
        #baseInfo{
            list-style: none;
        }
        #baseInfo li{
            float: left;
            width: 200px;
        }
         table,tr,th{
            padding: 0;
            height: 28px;
            text-align:center;
        }
        table,tr,td{
            padding: 0;
            height: 28px;
            text-align:center;
        }
        .weidu{
            margin-top: 20px;
        }
        
        .MsoNormalTable{
            mso-style-name:普通表格;
            mso-style-parent:"";
            mso-style-noshow:yes;
            mso-tstyle-rowband-size:0;
            mso-tstyle-colband-size:0;
            mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt;
            mso-para-margin:0pt;
            mso-para-margin-bottom:.0001pt;
            mso-pagination:widow-orphan;
            font-family:'Times New Roman';
            font-size:10.0000pt;
            mso-ansi-language:#0400;
            mso-fareast-language:#0400;
            mso-bidi-language:#0400;
        }
    </style>
</head>
<body style="padding:10px 20px">
    <button id="createWord" type="button" class="btn btn-default" onclick="createWord()">生成Word</button>
    <button id="printword" type="button" class="btn btn-default" onclick="toWord()">打印保存</button>
    <div id="export_word" style="margin:auto;width:90%;">
    <center><h2><%=cls.getSchoolName() %><%=cls.getGradename() %><%=cls.getClassName() %>(MHT)心理测评数据统计分析结果</h2></center><br>
    <div style="margin:auto;width:90%;">
    <div style="width:50%; float:left">
    <table id="myTable" style="text-align: center; border-collapse:collapse;width:90%;min-width:400px;mso-table-layout-alt:fixed;border:none;mso-border-left-alt:0.5000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;mso-border-bottom-alt:0.5000pt solid windowtext;mso-border-insideh:0.5000pt solid windowtext;mso-border-insidev:0.5000pt solid windowtext;mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;" class="MsoNormalTable" border="1">
        <thead>
        	<tr>
        		<th colspan=4>
        			MHT测量结果维度分布统计表			
        		</th>
        	</tr>
            <tr>
            	<th colspan=2>班级：<%=cls.getGradename()+cls.getGradename() %></th>
                <th colspan=2>人数：<%=personNumber.getChecknumber() %>人</th>
            </tr>
            <tr>
                <th>维度</th>
                <th>程度分级</th>
                <th>人数</th>
                <th>比列</th>          
            </tr>
        </thead>
        <tbody>
			<%
				for(int i=0;i<mhtStatisList.size();i++)
				{
					VClassMHTCheckReportStatis mhtStatis
						= (VClassMHTCheckReportStatis)mhtStatisList.get(i);
					if(i%3==0){
			 %>
             <tr>
                <td rowspan = 3><%=mhtStatis.getItemname() %></td>
                <td><%=mhtStatis.getStatus() %></td>
                <td><%=mhtStatis.getPersoncounter() %></td>
                <td><%=NumberUtil.tranRate(mhtStatis.getRate()*100)+"%"%></td>
             </tr>
             <%
             		}else{
              %>
             <tr> 
                <td><%=mhtStatis.getStatus() %></td>
                <td><%=mhtStatis.getPersoncounter() %></td>
                <td><%=NumberUtil.tranRate(mhtStatis.getRate()*100)+"%" %></td>
             </tr> 
            <%
             		}
             	}
            %>
        </tbody>
    </table>
    </div>
    <div style="width:50%; float:left">
    	 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	    <div id="xxjl" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img1" style="width: 550px;height:300px;display:none">
	    <div id="sjjl" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img2" style="width: 550px;height:300px;display:none">
	    <div id="kbqx" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img3" style="width: 550px;height:300px;display:none">
	    <div id="gdqx" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img4" style="width: 550px;height:300px;display:none">
	    <div id="gmqx" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img5" style="width: 550px;height:300px;display:none">
	    <div id="zzqx" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img6" style="width: 550px;height:300px;display:none">
	    <div id="cdqx" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img7" style="width: 550px;height:300px;display:none">
	    <div id="stzz" style="width: 550px;height:300px; backgroud:red"></div>
	    <img id="img8" style="width: 550px;height:300px;display:none">
    </div>
    </div>
    </div> 
    <script>

        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('xxjl'));

        // 指定图表的配置项和数据
       option1 = {
				    title : {
				        text: '学习焦虑',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    
    	//社交焦虑饼图
    	// 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('sjjl'));

        // 指定图表的配置项和数据
       option2 = {
				    title : {
				        text: '社交焦虑',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
        
         // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('kbqx'));

        // 指定图表的配置项和数据
       option3 = {
				    title : {
				        text: '恐怖倾向',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);
        
         // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('gdqx'));
        // 指定图表的配置项和数据
       option4 = {
				    title : {
				        text: '孤独倾向',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4);
        
         // 基于准备好的dom，初始化echarts实例
        var myChart5 = echarts.init(document.getElementById('gmqx'));
        // 指定图表的配置项和数据
       option5 = {
				    title : {
				        text: '过敏倾向',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart5.setOption(option5);
        
         // 基于准备好的dom，初始化echarts实例
        var myChart6 = echarts.init(document.getElementById('zzqx'));
        // 指定图表的配置项和数据
       option6 = {
			title : {
				 text: '自责倾向',
				       
				 x:'center'
			},
			tooltip : {
				 trigger: 'item',
				 formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				 orient: 'vertical',
				 x: 'right',
				 data: []
			},
			series : [
				{
				   name: '访问来源',
				   type: 'pie',
				   radius : '55%',
				   center: ['50%', '60%'],
				   data:[],
				   itemStyle: {
				        emphasis: {
				        shadowBlur: 10,
				        shadowOffsetX: 0,
				        shadowColor: 'rgba(0, 0, 0, 0.5)'
				    }
				}
			}
			],
			 animation:false
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart6.setOption(option6);
        
        // 基于准备好的dom，初始化echarts实例
        var myChart7 = echarts.init(document.getElementById('cdqx'));

        // 指定图表的配置项和数据
       option7 = {
				    title : {
				        text: '冲动倾向',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart7.setOption(option7);
        
        // 基于准备好的dom，初始化echarts实例
        var myChart8 = echarts.init(document.getElementById('stzz'));

        // 指定图表的配置项和数据
       option8 = {
				    title : {
				        text: '身体症状',
				       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: []
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart8.setOption(option8);
        
        /*
        	以下是数据的异步加载
        */
         //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=学习焦虑&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart1.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json"); 
        
        //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=社交焦虑&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart2.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");
		 
		  //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=恐怖倾向&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart3.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");
		 
		  //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=孤独倾向&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart4.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");
		 
		  //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=过敏倾向&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart5.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");
		  
		  
		 //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=自责倾向&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart6.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");
		   
		  //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=冲动倾向&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart7.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");
		 
		  //通过异步请求action实现数据的保存
         $.post("../sysevaluationresult/getcheckstatisbyitem?checktypeid=2&itemname=身体症状&"+
         "classid=<%=classid%>&checktime=<%=checktime%>", null, function(data, status){ 
		         myChart8.setOption({
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 }, "json");  
		   
        function toWord(){
        	
           $("#export_word").wordExport("<%=cls.getSchoolName()%><%=cls.getGradename() %><%=cls.getGradename() %>(MHT)心理测评数据统计分析结果");
        }
        
        var isvalidprint = false; //可保存但因状态
	
        $(function(){
        	if(isvalidprint == false){
        		$("#printword").attr('disabled',"true");//添加disabled属性 
        	}else{
        		$("#printword").removeAttr("disabled"); //移除disabled属性 
        	}
        });

        function createWord(){  alert("Word生成成功")
        	//将myChart1中的报表复制到img1中
        	var img1 = myChart1.getDataURL();
			$("#img1").attr('src', img1); 
			var img2 = myChart2.getDataURL();
			$("#img2").attr('src', img2);
			var img3 = myChart3.getDataURL();
			$("#img3").attr('src', img3); 
			var img4 = myChart4.getDataURL();
			$("#img4").attr('src', img4); 
			var img5 = myChart5.getDataURL();
			$("#img5").attr('src', img5); 
			var img6 = myChart6.getDataURL();
			$("#img6").attr('src', img6);  
			var img7 = myChart7.getDataURL();
			$("#img7").attr('src', img7); 
			var img8 = myChart8.getDataURL();
			$("#img8").attr('src', img8); 
			isvalidprint = true; 
			$("#printword").removeAttr("disabled"); //移除disabled属性 
        }
    </script>
</body>
    
</html>